<div data-controller="radio-selector">
  <div class="flex gap-x-4">
    <% options.each do |option| %>
      <%= render(RadioSelectCardComponent.new(
        name: option[:name],
        value: option[:value],
        checked: selected == option[:value],
        href: option[:href],
      )) do %>
        <div class="shadow-sm cursor-pointer transition-all hover:shadow-md flex-1">
          <div class="flex items-start gap-3">
            <div class="text-3xl">
              <% if option[:icon].match?(/\.(webp|png|jpg|jpeg|gif|svg)$/i) %>
                <img src="<%= option[:icon] %>" alt="<%= option[:label] %>" height="32" width="32">
              <% else %>
                <iconify-icon icon="<%= option[:icon] %>" height="32"></iconify-icon>
              <% end %>
            </div>
            <div class="flex-1">
              <h4 class="font-semibold"><%= option[:label] %></h4>
              <p class="text-sm text-gray-400 mt-1"><%= option[:description] %></p>
            </div>
          </div>
        </div>
      <% end %>
    <% end %>
  </div>
  <div class="mt-4">
    <% options.each do |option| %>
      <% if option[:partial].present? %>
        <div data-radio-selector-target="partial" data-value="<%= option[:value] %>" class="hidden">
          <%= render option[:partial], **option[:locals] %>
        </div>
      <% end %>
    <% end %>
  </div>
</div>